import { Link } from '@brillout/docpress'
import { CommunityNote, Example, ExampleTimestamp } from '../../components'

<CommunityNote url="https://vanjs.org" tool="VanJS" hasExtension={false} />

## `create-vanjs`

We recommend using [create-vanjs](https://github.com/thednp/create-vanjs) which integrates VanJS with a set of starter templates using Vike.

```bash
npm create vanjs@latest
```
Follow the prompts and select one of the Vike starter templates:

 - `vike` - a fully featured starter template;
 - `vike-jsx` - a fully featured starter template with JSX.

You can also <Link href="#custom-integration">integrate VanJS yourself</Link>.


## Custom integration

There isn't any `vike-vanjs` built-in integration (contribution welcome) but you can easily integrate VanJS on your own, for full control over the integration of VanJS and VanJS libraries.

Examples:
 - <Example timestamp="2025.03" repo="brillout/vike-with-van-jsx" />
 - <Example timestamp="2025.03" repo="brillout/vike-with-van" />
 - <ExampleTimestamp timestamp="2025.03" /> [`vike-ts` source code](https://github.com/thednp/create-vanjs/tree/master/template-vike-ts) - Full-fledged Typescript integration.
 - <ExampleTimestamp timestamp="2025.03" /> [`vike` source code](https://github.com/thednp/create-vanjs/tree/master/template-vike) - Full-fledged integration.
 - <ExampleTimestamp timestamp="2025.03" /> [`vike-jsx-ts` source code](https://github.com/thednp/create-vanjs/tree/master/template-vike-jsx-ts) - Full-fledged JSX Typescript integration.
 - <ExampleTimestamp timestamp="2025.03" /> [`vike-jsx` source code](https://github.com/thednp/create-vanjs/tree/master/template-vike-jsx) - Full-fledged JSX integration.


## See also

 - [VanJS - [Marketing] Plan?](https://github.com/vanjs-org/van/discussions/427)
 - <Link href="/ui-frameworks" />
